<template>
  <div style="width: 100%; font-family: 'Britannic Bold', serif; ">
    <div>
    <vue-particles
        color="#9ee499"
        :particleOpacity="0.9"
        :particlesNumber="180"
        shapeType="circle"
        :particleSize="4"
        linesColor="#9ee499"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
    >
    </vue-particles>
    </div>
 <div  class="back">
  <div class="divine_show" >
    <div style="width: 90%;height: 100px;margin: 10px auto;border:#2e3237  solid 1px;border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" >
      <el-page-header @back="goBack" :content="'卦象占卜演示系统'" >
      </el-page-header>
      <taiji-cartition  ></taiji-cartition>

    </div>
    <div style="width: 90%;height: 720px;margin: 10px auto;border:#2e3237  solid 1px;border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" >
      <el-tabs :value="activeName"  :tab-position="tabPosition" style="height: 700px;"  >
        <el-tab-pane label="六十四卦" name='1' >
<!--          六十四卦-->
        <GuaShow></GuaShow>
        </el-tab-pane>
        <el-tab-pane label="金钱卦" name='2' >
          <Money></Money>
        </el-tab-pane>
        <el-tab-pane label="大衍噬法" name='3'  >
          <Evolution></Evolution>
        </el-tab-pane>
        <el-tab-pane label="梅花易术" name='4'  >
          <plumBlossom ></plumBlossom>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
 </div>

</div>
</template>
<script >
// tabPosition: 'left'
import GuaShow from "@/views/showPage/GuaShow.vue";
import PlumBlossom from "@/views/showPage/plumBlossom.vue";
import Money from "@/views/showPage/Money.vue";
import Evolution from "@/views/showPage/Evolution.vue";
import TaijiCartition from "@/components/taijiCartition.vue";

export default {
  components: {TaijiCartition, Evolution, Money, PlumBlossom, GuaShow},
  data(){
    return{
      tabPosition: 'left',
      activeName:'3'
    }
  },
  props:{

  },
  mounted() {
    let query = this.$route.query
    console.log(query)
    this.activeName = query['activeName']
  },
  methods:{
    goBack(){
      this.$router.back();
    }
  }
}
</script>

<style scoped>
.back{
  position: absolute;
  top: 10px;
  width: 100%;
  height: 100%;

}
   .divine_show{
     border-radius: 10px;
     border: #2e3237 solid 1px;
     width: 55%;

     margin: 0 auto;
     height: 900px;
   }
</style>